<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Iframe Title</title>
<meta charset=utf-8 />
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
</head>
<body onload=sendSize() style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv style=background:#ABCDEF >

<table style='width:300px'>
<tr>
<td>
<table style='width:100%'>
<tr ><td id=drawPilotLightTopTable style='width:90%' align=center><span id=drawPilotLightEditSpan>Draw Pilot Lights</span></td><td align=right> <button onClick=parent.closeDrawPilotLight()  >X</button></td></tr>
<tr><td align=center colspan=2>

HMI Symbol SVG Source:<input type=checkbox  title="Show SVG source for this element"  id=sourceHMICheck  />


</td></tr>
</table>
</td>

</tr>

<tr>
<td align=center>

  Status: <select onChange=parent.drawPilotLightStatusSelected() id=drawPilotLightStatusSelect>
		<option value="green" >ON</option>
		<option value="red"  >ALARM</option>
		<option value="violet"  >INTERMITTENT</option>
		<option value="aqua"  >DEFECTIVE</option>
		<option value="grey"  >NORMAL OFF</option>



		</select>



  Size: <select onChange=parent.drawPilotLightScaleSelected() id=drawPilotLightScaleSelect>
		<option >5</option>
		<option >8</option>
		<option >10</option>
		<option >15</option>
		<option >20</option>
		<option >25</option>
		<option selected >30</option>
		<option >35</option>
		<option >40</option>
		<option >45</option>
		<option >50</option>


		</select>.px

</td>
</tr>

<tr align=center>
<td>

  Opacity: <select onChange=parent.drawPilotLightOpacitySelected() id=drawPilotLightOpacitySelect>
		<option >.1</option>
		<option >.2</option>
		<option >.3</option>
		<option >.4</option>
		<option >.5</option>
		<option >.6</option>
		<option>.7</option>
		<option >.8</option>
		<option >.9</option>
		<option selected  >1.0</option>



		</select>

</td>
</tr>

<tr  align=center>
<td>
	<button id=drawPilotLightCancelButton disabled title='cancel/remove this circle' onClick=parent.cancelDrawPilotLight()>cancel</button>
    <button style='background-color:red;visibility:hidden' id=drawPilotLightDeleteButton  onClick=parent.removeCurrentDrawPilotLight()>delete</button>
	<button id=drawPilotLightTopButton style=background:white;font-size:120%;font-weight:bold;color:maroon;visibility:hidden  title='Move to top' onClick=parent.topDrawPilotLight()>&#x21E7;</button>
	<button id=drawPilotLightBotButton style=background:white;font-size:120%;font-weight:bold;color:maroon   title='Move to bottom' onClick=parent.botDrawPilotLight()>&#x21E9;</button>

    <button id=drawPilotLightFinishButton disabled onClick=parent.finishDrawPilotLight()>finish</button>
</td>
</tr>

</table>
</div>


</body>
<script>



function sendSize()
{


   var width=containerDiv.scrollWidth+15
   var height=containerDiv.scrollHeight+30

   parent.sizeFrame('addElemPilotLight',width,height)


     if(parent.EditPilotLight==true)
        parent.setEditPilotLight()
        else
       parent.startPilotLightDraw()

}


</script>
</html>